<template>
	<view class="content-img">
		<view class="header-content flex justify-content-space-between" :style="{paddingTop: statusBarHeight+'px'}">
			<view style="width: 100rpx;" @click="onTapLeft"><eui-uicons color="#333" type="back" size="40" /></view>
			<view class="flex align-items-center" style="font-size: 18px;font-weight: 600;">
				详情
			</view>
			<view class="flex justify-content-flex-end" style="width: 100rpx;" @click="EditUserData">
				<eui-uicons color="#333" type="trash" size="40" />
			</view>
		</view>
	</view>
	<view class="main-view padding-all-20">
		<scroll-view scroll-y :style="{width:scrollWidth+'px',height:scrollHeight}">
			<view class="background-color-fff border-radius-20 padding-all-28">
				<view class="font-size-36 font-weight-bold">{{info.c_title}}</view>
				<view class="flex text-align-right margin-top-28 line-height-1 border-bottom-eee padding-bottom-28">
					<view class="flex flex-direction-column color-888 padding-right-16">
						<view class="font-size-26 height-13">发件人</view>
						<view class="margin-top-16 font-size-26 height-13" v-if="cShowAll">收件人</view>
						<view class="margin-top-16 font-size-26 height-13" v-if="cShowAll">时间</view>
						<view class="margin-top-16 font-size-26 height-13" v-if="cShowAll && accessoryList.length>0">附件</view>
					</view>
					<view class="flex flex-direction-column" style="text-align: left;flex: 1;">
						<view class="font-size-26 flex align-items-center justify-content-space-between height-13">
							<span>[{{info.c_sender}}]{{info.c_sender_name}}</span>
							<span
								:style="{color:themeColor}"
								style="font-size: 11px;" @click="handleShowAll">{{cShowAll?'隐藏':'详情'}}</span>
						</view>
						<view class="margin-top-16 font-size-26 height-13" v-if="cShowAll">
							{{info.c_receiver=="*" || info.c_receiver == null || info.c_receiver == ""?"全体人员":info.c_receiver_noname}}
						</view>
						<view class="margin-top-16 color-888 font-size-26 height-13" v-if="cShowAll">
							{{info.c_send_dt}}
						</view>
						<view class="margin-top-16 font-size-26" style="min-height: 13px;"
							v-for="(item,index) in accessoryList" :key="index" v-if="cShowAll && accessoryList.length>0">{{item.c_file_name}}
						</view>
					</view>
				</view>
				<view class="margin-top-28">
					<view class="email-html" style="overflow-y: auto;" v-html="c_html"></view>
					<!-- <iframe :src="contentUrl" style="width: 100%; height: 100%;border:0px;-webkit-overflow-scrolling:touch;overflow:scroll;"></iframe> -->
				</view>
				<view class="color-888 margin-top-28" v-if="accessoryList.length>0">{{accessoryList.length}}个附件</view>
				<view class="flex flex-direction-column margin-top-16" v-if="accessoryList.length>0">
					<view class="attachment-list flex" v-for="(item,index) in accessoryList" :key="index"
						@click.stop="checkImg(item,index)">
						<view class="flex align-items-center">
							<image :src="item.c_docimg_url" style="width: 32px;height: 32px;">
							</image>
						</view>
						<view
							class="flex flex-direction-column align-items-flex-start justify-content-center margin-left-30">
							<view class="font-weight-bold ellipsis-2" :style="{width:(scrollWidth-72)+'px'}">
								{{item.c_file_name}}
							</view>
							<view class="font-size-24 margin-top-10">{{item.c_modified_dt}}</view>
						</view>
					</view>
				</view>
			</view>
			<div style="width: 100%;height: 20rpx;"></div>
		</scroll-view>
		<view class="user-footer" style="justify-content: flex-end;" v-if="selType=='发件箱'&&industryTabIndex==1">
			<view class="flex align-items-center" style="">
				<eui-button type="base2" @click="beforeCancelSend" title="撤回" singleTag="primary_主按钮" />
			</view>
		</view>
		<view class="user-footer" v-else>
			<view class="flex-1 recover-input" v-if="!isOnlySend"><input type="text" v-model="c_note"
					style="width: 100%;font-size: 14px;" placeholder="我的回复" /></view>
			<view class="recover-email app-button" :class="[theme]"
				@click="beforeSendMail" v-if="!isOnlySend" :style="{opacity:c_note.length==0?'0.5':'1'}">发送</view>
			<eui-button type="base" @click="beforeSend" v-if="isOnlySend" title="发送" singleTag="primary_主按钮" />
		</view>
	</view>
</template>

<script setup type="ts">
	import { onLoad,onReady } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import Enjoy from '@/common/enjoy';
	import service from '@/common/service';
	import { storeToRefs } from 'pinia';
	import { useMainStore } from '@/store/modules/store';
	import { useLoginStore } from '@/store/modules/useLoginStore';
	import { useThemeStore } from '@/store/themeStore';
	const themeStore = useThemeStore(); // 主题
	const { theme } = storeToRefs(themeStore);
	const themeColor = ref(themeStore.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')
	import Guid from '@/common/guid';
	import dateRangUtil from '@/common/dateRangUtil';
	import eventBus from '@/pages/MainViews/eventBus';
	const mainStore = useMainStore();
	const LoginStore = useLoginStore();
	const scrollWidth = ref(uni.getSystemInfoSync().windowWidth-20);
	const scrollHeight = ref((uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight-108) + 'px');
	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);
	const info = ref({});
	const c_html = ref('');
	const c_note = ref('');
	const accessoryList = ref([]);
	const isOnlySend = ref(false);
	const selType = ref('');
	const industryTabIndex = ref('');
	const contentUrl = ref('');
	const cShowAll = ref(false);
	const c_read_status = ref('是');
	
	const onTapLeft = () =>{
		uni.navigateBack();
	}
	const EditUserData = () =>{
		uni.showModal({
			title: ' 提示',
			content: '请确认，是否删除?',
			showCancel: true,
			success: (res) => {
				if (res.confirm) {
					if(selType.value=='发件箱'){
						UpdateEmailTypeDraft();
					}else{
						DeleteItem();
					}
				}
			}
		});
	}
	const beforeCancelSend = () =>{
		uni.showModal({
			title: ' 提示',
			content: '请确认，是否撤回?',
			showCancel: true,
			success: (res) => {
				if (res.confirm) {
					service.enjoyShowLoading('正在删除...');
					let request = {
					    url: LoginStore.EnjoyMain,
					    data: {
					        UniqueKey: "管易通40内部邮件",
					        ObjectData: info.value.c_id,
					        MethodName: "CancelSend",
					    },
					}
					service.request(request, (res) => {
					    if (res && res.data) {
					        if (!res.data.HasException) {
								SetCurrentPages();
								uni.navigateBack();
								uni.showToast({
									duration: 3500,
									icon: 'none',
									title: "撤回成功!"
								});
					        } else {
					            service.enjoyShowToast(res.data.Exception.Message)
					        }
					    }
						service.enjoyHideLoading();
					}, () => {
						service.enjoyHideLoading();
					    console.log('失败')
					});
				}
			}
		});
	}
	const DeleteItem = () =>{
		service.enjoyShowLoading('正在删除...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					c_email_id:info.value.c_id,
					c_employee_code:mainStore.loginInfo.sUser
				},
		        MethodName: "DeleteItem",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					SetCurrentPages();
					uni.navigateBack();
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: "删除成功!"
					});
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const UpdateEmailTypeDraft = () =>{
		service.enjoyShowLoading('正在删除...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					c_id:info.value.c_id,
				},
		        MethodName: "UpdateEmailTypeDraft",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					SetCurrentPages();
					uni.navigateBack();
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: "删除成功!"
					});
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const EnjoyBillQuery = BillId =>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					BillId
				},
		        MethodName: "EnjoyBillQuery",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
	
					if (c_read_status.value == '否') {
						SignEmailReaded(BillId);
					}
					const ObjectData = res.data.ObjectData;
					if(ObjectData != null && ObjectData.ds.length > 0) {
						info.value = {
							...ObjectData.ds[0],
						};
						const Url = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
						
						contentUrl.value = Url + '/FILE/getcontent/' + ObjectData.ds[0].c_guid;// + GetIdTial();
						console.log("contentUrl.value: " + JSON.stringify(contentUrl.value));
						
						DocGetContent(ObjectData.ds[0].c_guid);
					}
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	// 获取内容
	const DocGetContent = c_guid =>{
		service.enjoyShowLoading('正在加载...');
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40公共",
		        ObjectData: c_guid,
		        MethodName: "DocGetContent",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					c_html.value = ObjectData;
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
				GetAccessDoc(c_guid);
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	// 获取附件
	const GetAccessDoc = c_guid =>{
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					sBillId:c_guid+'file',
					sBillType: '邮件管理'
				},
		        MethodName: "GetAccessDoc",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					let list = [];
					const Url = LoginStore.EnjoyMain.replace('/Enjoy/Service', '');
					const imgType = ["gif", "jpeg", "jpg", "bmp", "png"];
					for (let i = 0; i < ObjectData.length; i++) {
						let c_type = "";
						if (RegExp("\.(" + imgType.join("|") + ")$", "i").test(ObjectData[i].c_file_name)) {
							c_type = 'img';
						} else {
							c_type = 'file';
						}
						const type_name = c_type == 'img' ? ObjectData[i].c_file_name : ObjectData[i].c_name;
						list.push({
							...ObjectData[i],
							c_filename: ObjectData[i].c_name,
							c_type: c_type,
							c_url: Url + '/File/DownLoadFile/' + ObjectData[i].c_guid + GetIdTial(),
							c_img_sc: Url + '/File/DownLoadFile/' + ObjectData[i].c_guid,
							c_docimg_url: getDocImgType(type_name == null ? '' :
								type_name),
						})
					}
					accessoryList.value = list;
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
		}, () => {
		    console.log('失败')
		});
	}
	const getDocImgType = docName => {
		let fix = docName.substr(docName.lastIndexOf(".") + 1).toLowerCase();
		if (docName != undefined && docName != "" && fix != undefined) {
			if (fix == 'doc' || fix == 'docx') {
				return '/static/img/knowledge/docx.png';
			} else if (fix == 'txt') {
				return '/static/img/knowledge/txt.png';
			} else if (fix == 'ppt' || fix == 'pptx') {
				return '/static/img/knowledge/pptx.png';
			} else if (fix == 'jpg' || fix == 'png' || fix == 'bmp' || fix == 'jpeg' || fix == 'gif') {
				return '/static/img/knowledge/picture.png';
			} else if (fix == 'exe') {
				return '/static/img/knowledge/exe.png';
			} else if (fix == 'pdf') {
				return '/static/img/knowledge/pdf.png';
			} else if (fix == 'avi' || fix == 'wma' || fix == 'rmvb' || fix == 'mp4' || fix == 'mov' || fix ==
				'mpeg' || fix == 'flv' || fix == 'asf') {
				return '/static/img/knowledge/video.png';
			} else if (fix == 'html' || fix == 'xml') {
				return '/static/img/knowledge/html.png';
			} else if (fix == 'xls' || fix == 'xlsx' || 'xlsm') {
				return '/static/img/knowledge/xml.png';
			} else {
				return '/static/img/knowledge/spl.png';
			}
		} else {
			return '/static/img/knowledge/spl.png';
		}
	}
	const GetIdTial = () =>{
		//新服务不需要这块的尾巴了 CT 20241031
		/* const wgtVer = JSON.parse(uni.getStorageSync('MBMAppVerion'));
		let token = JSON.parse(uni.getStorageSync('uniIdToken'));
		if((wgtVer>=110 && wgtVer.length<=5) || wgtVer.length>5){
			// 替换+为-||
			token = token.replace(/\+/g, '-||');
			// 替换/为-|||
			token = token.replace(/\//g, '-|||');
			// 替换=为-||||
			token = token.replace(/=/g, '-||||');
			return "|"+mainStore.loginInfo.sUser+"|"+token;
		}else{
			return "";
		} */
		return "";
	}
	const beforeSendMail = () =>{
		if(!c_note.value){
			uni.showToast({
				duration: 3500,
				icon: 'none',
				title: "请输入回复内容!"
			});
			return false;
		}
		service.enjoyShowLoading('正在处理...');
		const c_guid = Guid.NewGuid().ToString();
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					c_sender: mainStore.loginInfo.sUser,
					c_title: '回复：' + info.value.c_title,
					c_email_send_type: "1",
					c_receiver: info.value.c_sender,
					c_copy_receiver: '',
					c_content: c_note.value,
					c_guid: c_guid,
					c_mk_dt: dateRangUtil.formatDate('','YYYY-MM-DD HH:mm:ss'),
					c_is_send_exterior: "否",
					c_is_send_sms: "否",
					c_is_attachment: "否",
					c_exterior_receiver: "",
					c_organ_receiver: "",
					c_depart_receiver: "",
					c_station_receiver: "",
				},
		        MethodName: "sendMail",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					SetCurrentPages();
					uni.navigateBack();
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: "发送成功!"
					});
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const beforeSend = () =>{
		service.enjoyShowLoading('正在处理...');
		const c_guid = Guid.NewGuid().ToString();
		let request = {
		    url: LoginStore.EnjoyMain,
		    data: {
		        UniqueKey: "管易通40内部邮件",
		        ObjectData: {
					c_sender: mainStore.loginInfo.sUser,
					c_title: info.value.c_title,
					c_email_send_type: "4",
					c_receiver: info.value.c_receiver,
					c_copy_receiver: info.value.c_copy_receiver,
					c_content: info.value.c_content,
					c_guid: c_guid,
					c_mk_dt: dateRangUtil.formatDate('','YYYY-MM-DD HH:mm:ss'),
					c_is_send_exterior: "否",
					c_is_send_sms: "否",
					c_is_attachment: "否",
					c_exterior_receiver: "",
					c_organ_receiver: "",
					c_depart_receiver: "",
					c_station_receiver: "",
					c_id: info.value.c_id
				},
		        MethodName: "sendMail",
		    },
		}
		service.request(request, (res) => {
		    if (res && res.data) {
		        if (!res.data.HasException) {
					const ObjectData = res.data.ObjectData;
					SetCurrentPages();
					uni.navigateBack();
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: "发送成功!"
					});
		        } else {
		            service.enjoyShowToast(res.data.Exception.Message)
		        }
		    }
			service.enjoyHideLoading();
		}, () => {
			service.enjoyHideLoading();
		    console.log('失败')
		});
	}
	const checkImg = (item, index) => {
		console.log("item: " + JSON.stringify(item));
		if (item.c_type == 'img') {
			const urlList = accessoryList.value.reduce((acc, kk) => {
				if (kk.c_type === 'img') {
					acc.push(kk.c_img_sc);
				}
				return acc;
			}, []);
			const _index = urlList.findIndex(i => i == item.c_img_sc);
			console.log("urlList: " + JSON.stringify(urlList));
			uni.previewImage({
				current: _index,
				urls: urlList
			})
		} else {
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确定要下载该文件吗?',
				success: function (res) {
					if (res.confirm) {
						let options = {
							filename: '_downloads/' + item.c_file_name,
							method: 'GET',
						};
						plus.io.resolveLocalFileSystemURL(item.c_file_name,
							function (entry) {
								console.log("entry: " + JSON.stringify(entry));
								FileExistsCallback(entry, options, item.c_filename,
									item.c_url);
							},
							function (e) {
								console.log("e: " + JSON.stringify(e));
								FileNotExistsCallback(e, options, item.c_filename,
									item.c_url);
							}
						);
						// if (plus.os.name != "iOS") {
						// 	plus.runtime.openURL(item.c_projectName);
						// } else {
						// 	let options = {
						// 		filename: '_downloads/' + item.c_filename,
						// 		method: 'GET',
						// 	};
						// 	plus.io.resolveLocalFileSystemURL(options.filename,
						// 		function (entry) {
						// 			FileExistsCallback(entry, options, item.c_filename,
						// 				item.c_projectName);
						// 		},
						// 		function (e) {
						// 			FileNotExistsCallback(e, options, item.c_filename,
						// 				item.c_projectName);
						// 		}
						// 	);
						// }
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
	//文件已存在
	const FileExistsCallback = (entry, options, filename, guid) => {
		uni.showModal({
			title: '提示',
			content: '选择的文件已下载过,是否直接打开',
			success: function (res) {
				if (res.confirm) {
					// 直接打开
					plus.runtime.openFile(options.filename, function (e) {
						uni.showToast({
							duration: 3500,
							icon: 'none',
							title: "无法打开此文件：" + e.emssage,
							mask: true,
						});
					});
				} else if (res.cancel) { }
			}
		});
	}
	//文件不存在回调函数
	const FileNotExistsCallback = (e, options, filename, c_url) => {
		downLoadFile(options, filename, c_url);
	}
	const downLoadFile = (option, filename, c_url) => {
		console.log("option: " + JSON.stringify(option));
		console.log("filename: " + JSON.stringify(filename));
		console.log("c_url: " + JSON.stringify(c_url));
		let i = 0;
		let updateWatting = plus.nativeUI.showWaiting("正在准备下载文件...");
		let downUrl = c_url;
		let dtask = plus.downloader.createDownload(c_url, option);
		dtask.addEventListener("statechanged", function (task, status) {
			if (!dtask) {
				return;
			}
			switch (task.state) {
				case 1: // 开始
					updateWatting.setTitle("开始下载...");
					break;
				case 2: // 已连接到服务器
					updateWatting.setTitle("链接到服务器...");
					break;
				case 3: // 已接收到数据
					updateWatting.setTitle("已下载:" + task.downloadedSize + "/" + task.totalSize);
					break;
				case 4: // 下载完成
					updateWatting.close();
					uni.showToast({
						duration: 3500,
						icon: 'none',
						title: '下载完成!',
						mask: true,
					});
					plus.runtime.openFile(option.filename, function (e) {
						uni.showToast({
							duration: 3500,
							icon: 'none',
							title: "无法打开此文件：" + e.emssage,
							mask: true,
						});
					});
					break;
			}
		});
		dtask.start();
	}
	const SetCurrentPages = () =>{
		try {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			prevPage.$vm.$.exposed.onRefresh();
		} catch (e) {
		}
	}
	const handleShowAll = () =>{
		cShowAll.value = !cShowAll.value ;
	}
	// 更新阅读状态
	const SignEmailReaded = (c_id) => {
		let request = {
			url: LoginStore.EnjoyMain,
			data: {
				UniqueKey: "管易通40内部邮件",
				ObjectData: {
					ids: c_id,
					sUserNo: mainStore.loginInfo.sUser,
				},
				MethodName: "SignEmailReaded",
			},
		}
		service.request(request, (res) => {
			if (res && res.data) {
				if (!res.data.HasException) {
					setTimeout(() => {
						eventBus.emit('refresh-EmailList');
					}, 500);
				} else {
					service.enjoyShowToast(res.data.Exception.Message)
				}
			}
		}, () => {
			console.log('失败')
		});
	}
	onLoad(e=>{
		console.log("e: " + JSON.stringify(e));
		if(e.selType&&e.industryTabIndex){
			selType.value = e.selType;
			industryTabIndex.value = e.industryTabIndex;
			// isOnlySend.value = true;
			c_read_status.value = e.c_read_status || '是';
		}
		EnjoyBillQuery(e.id);
	})
</script>

<style lang="scss" scoped>
	@import '@/main.scss';

	.content-img {
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		width: 100%;
	}

	.main-view {
		flex: 1;
		flex-direction: column;
		background-color: #f2f2f2;
		font-size: 14px;
	}

	.font-size-36 {
		font-size: 36rpx;
	}

	.font-size-26 {
		font-size: 26rpx;
	}

	.font-weight-bold {
		font-weight: bold;
	}

	.padding-all-20 {
		padding: 20rpx;
	}

	.padding-all-28 {
		padding: 28rpx;
	}

	.background-color-fff {
		background-color: #fff;
	}

	.border-radius-20 {
		border-radius: 20rpx;
	}

	.flex {
		display: flex;
	}

	.flex-direction-column {
		flex-direction: column !important;
	}

	.text-align-right {
		text-align: right;
	}

	.color-888 {
		color: #888;
	}

	.padding-right-16 {
		padding-right: 16rpx;
	}

	.margin-top-28 {
		margin-top: 28rpx;
	}

	.line-height-1 {
		line-height: 1;
	}

	.margin-top-16 {
		margin-top: 16rpx;
	}

	.padding-bottom-28 {
		padding-bottom: 28rpx;
	}

	.border-bottom-eee {
		border-bottom: solid 1px #eee;
	}

	.attachment-list {
		height: 55px;
		border-radius: 10px;
		background-color: rgba(249, 249, 248, 1);
		margin-bottom: 10px;
		padding: 0 10px;
		font-size: 14px;
	}

	.align-items-center {
		align-items: center;
	}

	.align-items-flex-start {
		align-items: flex-start;
	}

	.justify-content-center {
		justify-content: center;
	}

	.margin-left-30 {
		margin-left: 30rpx;
	}

	.font-size-24 {
		font-size: 24rpx;
	}

	.margin-top-10 {
		margin-top: 10rpx;
	}

	.user-footer {
		position: fixed;
		z-index: 9;
		bottom: 0;
		left: 0;
		right: 0;
		height: 108rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.recover-email {
		width: 100rpx;
		height: 68rpx;

		border-radius: 10rpx;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.app-button {
		background: var(--theme-bgc-color);
	}

	.recover-input {
		height: 68rpx;
		background-color: rgba(249, 249, 248, 1);
		margin-right: 10px;
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 28rpx;
	}

	.iconfont {
		font-size: 20px;
		width: 40px;
		height: 100%;
		text-align: center;
		line-height: 37px;
		@include themeText("themeText");
	}

	.ellipsis-1 {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: normal;
		box-sizing: border-box;
	}

	.header-content {
		height: 88rpx;
		padding: 0 6px;
		background-color: #fff;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	.justify-content-space-between {
		justify-content: space-between;
	}

	.justify-content-flex-end {
		justify-content: flex-end;
	}
	.height-13{
		height: 13px;
	}
</style>